<template>
	<view class="page">
		<!-- 订单状态 -->
		<view class="order-status">
			<view class="status">
				<text class="iconfont icon-zhuyi"></text>
				<text>{{dataInfo.status_name}}</text>
			</view>
		</view>
		<!-- 收货地址 -->
		<!-- <view class="shipping-address">
			<view class="name-phone">
				<text class="iconfont icon-dingwei"></text>
				<text>{{address.address_name}}</text>
				<text>{{address.address_phone}}</text>
			</view>
			<view class="address">
				<text>{{address.address_province}}{{address.address_city}}{{address.address_area}}{{address.address_content}}</text>
			</view>
			
		</view> -->
		<!-- 订单商品 -->
		<view class="order-goods" style="margin-top: 20rpx;">
			<view class="goods-list">
				<view class="list" v-for="(item,index) in order" :key="index" style="display: block;">
					<view class="flex flex-align">
						<view class="thumb">
							<image :src="item.goods_cover" mode=""></image>
						</view>
						<view class="item">
							<view class="title">
								<text class="one-omit">{{item.goods_name}}</text>
							</view>
							<view class="num-size">
								<text>{{item.goods_spec}}</text>
							</view>
							<view class="price" style="display: flex;justify-content: space-between;" v-if="dataInfo.goods_type!=3&&dataInfo.goods_type!=4">
								<text>￥{{item.price_selling}}</text>
								<text> x{{item.stock_sales}}</text>
							</view>
							<view class="price" style="display: flex;justify-content: space-between;" v-if="dataInfo.goods_type==3">
								<text>{{item.price_selling}}鸡蛋</text>
								<text> x{{item.stock_sales}}</text>
							</view>
							<view class="price" style="display: flex;justify-content: space-between;" v-if="dataInfo.goods_type==4">
								<view class=""><text v-if="item.price_selling!=0">{{item.price_selling}}+</text><text>{{item.balance3}}积分</text></view>
								<text> x{{item.stock_sales}}</text>
							</view>
							<!-- <view class="order-btn">
								<view class="btn" @click="onApplyAftersales">
									<text>申请售后</text>
								</view>
							</view> -->
						</view>
					</view>
					
					<view class="yongjin" v-if="dataInfo.goods_type!=3&&dataInfo.goods_type!=4">
						<view class="flex flex-align flex-bt">
							<view class="left">
								<view class="num ">商品金额: <text style="color: #f20;">￥{{item.price_selling}}</text></view>
								<view class="num ">有效金额: <text style="color: #f20;">￥{{item.total_selling}}</text></view>
							</view>
							<view class="right">
								<view class="num ">退款金额: <text style="color: #f20;">￥{{item.commission_price}}</text></view>
								<view class="num ">佣金比例: <text style="color: #f20;">{{item.commission_rate}}%</text></view>
							</view>
						</view>
					</view>
				</view>
				
			</view>
			<!-- <view class="contact">
				<text class="iconfont icon-kefu"></text>
				<text>联系客服</text>
			</view> -->
		</view>
		<!-- 订单信息 -->
		<view class="order-info">
			<view class="info-list">
				<view class="list flex-bt">
					<view class="title">团单编号:</view>
					<view class="content">
						<text>{{dataInfo.order_no}}</text>
					</view>
				</view>
				<view class="list flex-bt">
					<view class="title">下单时间:</view>
					<view class="content">
						<text>{{dataInfo.create_at}}</text>
					</view>
				</view>
				<view class="list flex-bt">
					<view class="title">优惠券:</view>
					<view class="content">
						<text>-￥{{dataInfo.coupon_price}}</text>
					</view>
				</view>
				<view class="list flex-bt">
					<view class="title">支付金额:</view>
					<view class="content" v-if="dataInfo.goods_type!=3&&dataInfo.goods_type!=4">
						<text>￥{{dataInfo.amount_total}}</text>
					</view>
					<view class="content" v-if="dataInfo.goods_type==3">
						<text>{{dataInfo.amount_total}}鸡蛋</text>
					</view>
					<view class="content" v-if="dataInfo.goods_type==4">
						<text v-if="dataInfo.amount_total!=0">{{dataInfo.amount_total}}+</text><text>{{dataInfo.balance3}}积分</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 订单明细 -->
		<view class="order-details" style="padding-bottom: 0;">
			<view class="details-list">
				<view class="list action">
					<view class="title">
						<text>实付款：</text>
					</view>
					<view class="price" v-if="dataInfo.goods_type!=3&&dataInfo.goods_type!=4">
						<text>￥{{dataInfo.amount_real}}</text>
					</view>
					<view class="price" v-if="dataInfo.goods_type==3">
						<text>{{dataInfo.amount_real}}鸡蛋</text>
					</view>
					<view class="price" v-if="dataInfo.goods_type==4">
						<text v-if="dataInfo.amount_real!=0">{{dataInfo.amount_real}}+</text><text>{{dataInfo.balance3}}积分</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部按钮 -->
		<!-- <view class="footer-btn">
			<view class="del">
				<text>删除订单</text>
			</view>
			<view class="btn">
				<text>查看发票</text>
				<text class="action">确认付款</text>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataInfo:'',
				order:[],
				order_no:'',
				address:''
			};
		},
		onLoad(e) {
			this.order_no=e.order_no
		},
		onShow() {
			this.getInfo()
		},
		methods:{
			/**
			 * 售后点击
			 */
			copy(e){
				let that = this
				uni.setClipboardData({
					data: e,
					success: function () {
						that.tui.toast('复制成功')
					}
				});
			},
			onApplyAftersales(){
				uni.navigateTo({
					url: '/pages/AfterSaleType/AfterSaleType',
				})
			},
			getInfo() {
				let that = this
				that.tui.request("api.auth.live/orderDetail", "post", {order_no: that.order_no}, false, true, false).then((res) => {
					console.log(res)
					if (res.code == 1) {
						that.dataInfo = res.data.info
						that.order = res.data.info.order
						that.address =res.data.info.address
					}
			
				}).catch((res) => {
					console.log(res)
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	@import 'OrderDetails.scss';
	.yongjin{padding-bottom: 20rpx;margin-top: 20rpx;
		.num{line-height: 1.8;color: #999;}
		.right{text-align: right;}
	}
</style>
